<template>
  <div class="language">
    <el-dropdown @command="commandEvent">
      <!-- 默认插槽 -->
      <div class="type">
        中/En
      </div>
      <!-- 具名插槽 -->
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zh" :disabled="$i18n.locale === 'zh'">
            中文
          </el-dropdown-item>
          <el-dropdown-item command="en" :disabled="$i18n.locale === 'en'">
            English
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data () {
    return {
      type: 'zh'
    }
  },
  methods: {
    // 切换语言
    commandEvent (command) {
      this.type = command
      // 此处做了语言选择记录
      localStorage.setItem('locale', command)
      // 修改显示语言
      this.$i18n.locale = command
      this.$router.go(0)
    }
  }
}
</script>

<style lang="scss" scoped>
.type {
  width: 70px;
  height: 30px;
  cursor: pointer;
  padding: 5px;
  border: 1px solid black;
  // background-color: rgba(102, 177, 255, 0.3);
  border-radius: 5px;
  text-align: center;
}
</style>
